<template>
  <div class="container">
    <img class="logo" src="/static/images/icon_plogo.png">
    <div class="logo-title">{{logoTitle}}</div>

    <div class="title">授权登陆</div>
    <span class="subtitle">允许登陆{{logoTitle}}小程序</span>

    <button open-type="getUserInfo" class="btn" @getuserinfo="bindGetUserInfo">
      授权微信帐号登陆
    </button>

    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
      授权微信帐号登陆
    </button>

    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
// import store from '@/utils/store' // 全局状态管理
import { setStorage, backPage, userInfoSave } from '@/utils'
import Dialog from '../../../static/vant/dialog/dialog'

export default {
  components: {
  },

  data () {
    return {
      // TODO: 商城标题定义
      logoTitle: '德施曼商城'
    }
  },
  onShow () {
    // 登陆微信接口
    // 服务端有专门API，地址介绍 https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html
    wx.login({
      success (res) {
        // 发起网络请求，发送凭证
        wx.request({
          url: 'https://www.fybqq.com/test/wxLogin.php',
          data: {code: res.code},
          header: {
            'content-type': 'application/json' // 默认值
          },
          // 获取数据成功后
          success: function (res) {
            if (res.statusCode === 200) {
              // 把用户验证id存入缓存中
              // wx.setStorageSync('openid', res.data)
              setStorage('openid', res.data)
            } else {
              console.log(res.errMsg)
            }
          },
          fail: function (res) {
            console.log('获取临时code失败！' + res.errMsg)
          }
        })
      }
    })
  },
  methods: {
    // 未使用
    getUserInfo1 () {
      // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
      // console.log(wx.canIUse('button.open-type.getUserInfo'))
      if (wx.canIUse('button.open-type.getUserInfo')) {
        // 用户版本可用
      } else {
        // 弹窗提示用户
        Dialog.alert({
          message: '微信版本过旧,请升级微信版本'
        })
      }
    },
    // 用户点击授权按钮时，会返回获取到的用户信息，
    bindGetUserInfo (e) {
      try {
        if (!e.mp.detail.rawData) {
          // 用户按了拒绝按钮
          console.log('用户按了拒绝按钮')
          return
        }
        // 用户按了允许授权按钮，TODO: 带信息远程注册用户信息
        userInfoSave()
        backPage(1) // 回退页面
      } catch (error) {
        // 捕获错误
        console.log(error)
      }
    },
    getPhoneNumber (e) {

    }
  }
}
</script>

<style scope>
page {
  background: #fff;
  color: #000;
}
.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 32rpx;
}
.logo {
  margin-top: 80rpx;
  width: 149rpx;
  height: 100rpx;
}
.logo-title {
  padding-top:22rpx;
}
.title {
  margin: 60rpx 0 20rpx 0;
  font-size: 42rpx;
}
.subtitle {
  color: #9A9A9A;
}
/* 登陆按钮 */
.btn {
  margin: 30rpx 0;
  width: 680rpx;
  font-size: 36rpx;
  color: #fff;
  background: #07C160;
}
</style>
